<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>装饰者模式</title>
</head>

<body>
  <button type="button" id="btn1">装饰者模式</button>

  <script>
    let btn1 = document.querySelector("#btn1");
    // dom0级的事件绑定，只允许绑定一个事件函数。
    btn1.onclick = function () {
      console.log('111');
    }

    // console.log(typeof btn1.onclick);//'function'
    // btn1.onclick = function () {
    //   console.log('222');
    // }

    // btn1.onclick = function () {
    //   console.log('3333');
    // }

    // dom2级事件绑定：
    // btn1.addEventListener('click', function () {
    //   console.log(1111);
    // })
    // btn1.addEventListener('click', function () {
    //   console.log(222);
    // })

    // 手动实现一个addEvenetListener()的效果：

    const decorator = (eventName, dom, newFn) => {
      let oldFn = function () { };

      // 判断dom节点有没有绑定这个事件
      if (typeof dom[eventName] === 'function') { //typeof btn1.onclick
        oldFn = dom[eventName]
        console.log(oldFn); // function
      }
      // 再重新绑定事件
      // btn1.onclick = function(){
      // oldFn()
      // newFn()
      // }
      dom[eventName] = function () {
        oldFn()// 111
        newFn()//444
      }
      console.log(dom[eventName]);
    }

    // 调用一次
    decorator("onclick", btn1, function () {
      console.log(44444);
    })
    // 调用2次
    decorator("onclick", btn1, function () {
      console.log(55555);
    })
  </script>
</body>

</html>